<template>
  <div
    class="home"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(5,43,70, 0.8)"
  >
    <!-- 地图区域 -->
    <div class="homeleft">
      <div id="map"></div>
      <div class="maptext">某某科技大学</div>
      <bottomWrap
        @showCbTable="getshowCbTable"
        ref="bottomWrap1"
        :scaleData="scaleData"
        :deviceData="deviceData"
        :outexceed="outexceed"
      ></bottomWrap>
      <mapLegend></mapLegend>
      <div class="slectArr">
        <selectName
          :selectArr="selectArr"
          keys="facultyName"
          label="facultyName"
          valueKey="facultyName"
          :title="false"
          :value="selvalue"
          @dropDown="(val) => (selvalue = val)"
        ></selectName>
      </div>
    </div>
    <!-- 右边区域 -->
    <div class="homeright">
      <rightWrap
        @showTable="getTable"
        :deviceData="deviceData"
        :tabData="righttabData"
        :difEventOfNumData="difEventOfNumData"
        :findUsingConditionData="findUsingConditionData"
      ></rightWrap>
    </div>
    <!-- 表格查看更多弹窗 -->
    <tableDialog
      :dialogTableVisible="dialogTableVisible"
      @close="
        (event) => {
          dialogTableVisible = event;
        }
      "
      :exportInterfaceName="'frontpageexport'"
      :formData="'formData'"
      :eventName="'initeventList'"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :tableTimeValue="tableTimeValue"
      @outValue="(event) => (tableTimeValue = event)"
      :total="total"
      :title="'实时事件'"
      :type="'datetimerange'"
    >
      <template #table>
        <mergeTable :tableData="table" :tableConfig="config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="事件类型" slot="eventType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getStatuseventType(row.eventType)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 超标弹窗 -->
    <tableDialog
      :dialogTableVisible="cbdialogTableVisible"
      @close="
        (event) => {
          cbdialogTableVisible = event;
        }
      "
      :formData="'formData'"
      :eventName="'initselectEnvList'"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :tableTimeValue="cbtableTimeValue"
      @outValue="(event) => (cbtableTimeValue = event)"
      :total="total"
      :title="'超标详情'"
      :type="'datetimerange'"
    >
      <template #table>
        <mergeTable :tableData="table" :tableConfig="cbconfig">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="超标因子" slot="factorList">
            <template slot-scope="{ row }">
              {{ row.factorList }}
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 点位弹窗 -->
    <el-dialog
      width="35%"
      title=""
      :modal="true"
      :lock-scroll="true"
      :custom-class="'tableDialog1'"
      :append-to-body="false"
      :modal-append-to-body="false"
      :visible.sync="pointVisible"
    >
      <comTitle slot="title">
        <template #title>
          <img
            class="pr-12"
            src="@/assets/images/home/main_icon_item1.svg"
            alt=""
            style="width: 35px; height: 32px"
          />
          <span
            class="fs-24 mr-38 cr-main"
            v-if="mapDetail.pointInfo[0] && mapDetail.pointInfo[0].pointName"
            >{{ mapDetail.pointInfo[0].pointName }}</span
          >
        </template>
      </comTitle>
      <div class="content">
        <scroll height="100">
          <div class="boxInfo fs-16">
            <div class="flex-common mb-14">
              <span class="cr-hui4 label">所属院系：</span>
              <span
                class="cr-hui3 flex1"
                v-if="
                  mapDetail.pointInfo[0] && mapDetail.pointInfo[0].facultyName
                "
                >{{ mapDetail.pointInfo[0].facultyName }}</span
              >
            </div>
            <div class="flex-common mb-14">
              <span class="cr-hui4 label">所属院校：</span>
              <span
                class="cr-hui3 flex1"
                v-if="
                  mapDetail.pointInfo[0] && mapDetail.pointInfo[0].collegeName
                "
                >{{ mapDetail.pointInfo[0].collegeName }}</span
              >
            </div>
            <div class="flex-common mb-14">
              <span class="cr-hui4 label">院校地址：</span>
              <span
                class="cr-hui3 flex1"
                v-if="
                  mapDetail.pointInfo[0] &&
                  mapDetail.pointInfo[0].facultyAddress
                "
                >{{ mapDetail.pointInfo[0].facultyAddress }}</span
              >
            </div>
            <div class="flex-common mb-14">
              <span class="cr-hui4 label">相关联系人：</span>
              <span
                class="cr-hui3 flex1"
                v-if="mapDetail.pointInfo[0] && mapDetail.pointInfo[0].contact"
                >{{ mapDetail.pointInfo[0].contact }}</span
              >
            </div>
            <div class="flex-common">
              <span class="cr-hui4 label">联系方式：</span>
              <span
                class="cr-hui3 flex1"
                v-if="
                  mapDetail.pointInfo[0] && mapDetail.pointInfo[0].contaction
                "
                >{{ mapDetail.pointInfo[0].contaction }}</span
              >
            </div>
          </div>
          <div class="detail">
            <div class="cr-hui fs-20 mt-24 mb-24">实验室详情</div>
            <div class="flex-common flex5" style="flex-wrap: wrap">
              <div
                class="listItem1 familyA mb-8 fs-14 flex-around mr-24"
                v-for="item in schoolDeviceData"
                :key="item.name"
              >
                <img
                  class="pl-12 pr-12"
                  :src="require(`@/assets/images/home/${item.img}.svg`)"
                  alt=""
                  style="width: 28px; height: 22px; flex-shrink: 0"
                />
                <div class="cr-hui3 flex-start" style="flex: 1.8">
                  {{ item.name }}
                </div>
                <div class="flex-around" style="align-items: baseline; flex: 2">
                  <span
                    class="familyD cr-main fs-18"
                    v-if="item.value === 'notPassNum'"
                    >{{ mapDetail.notPassRate[item.value] }}</span
                  >
                  <span class="familyD cr-main fs-18" v-else>{{
                    mapDetail.difEquipmentTypeOfNum[item.value]
                  }}</span>

                  <span class="cr-hui4">{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="deviceDetail flex">
            <div class="echart_right flex">
              <div class="data-right flex-column">
                <div class="cr-hui fs-20 mt-24 mb-24">设备状态详情</div>
                <div class="data-end-right">
                  <div
                    class="flex mb-20 status"
                    v-for="item in scaleData"
                    :key="item.name"
                  >
                    <div class="flex-start">
                      <div
                        :class="`spot`"
                        :style="{
                          'background-color': item.color,
                          'border-color': item.bg,
                        }"
                      ></div>
                      <span class="fs-12 cr-hui3">{{ item.name }}</span>
                    </div>
                    <div>
                      <span
                        class="fs-20 cr-blue familyD"
                        :style="{
                          color: item.color,
                        }"
                        >{{ mapDetail.difEquipmentTypeOfNum[item.value] }}</span
                      >
                      <span class="fs-14 cr-hui4 ml-12">台</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="center_chart">
                <echartData
                  :wasteTypewuran="wasteTypewuran1"
                  :width="90"
                  :height="90"
                  :sum="mapDetail.difEquipmentTypeOfNum.sumNum"
                ></echartData>
              </div>
            </div>
          </div>
        </scroll>
        <div class="seemore">
          <div class="more" @click="seemore">查看更多</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MapLoader from "@/utils/Map";
import { Point } from "@/jsonData/index";
import {
  monitorData,
  notPassRate,
  findUsingCondition,
  eventList,
  eventListOfNow,
  difEventOfNum,
  pointAllInfo,
  selectEnvList,
} from "@/http/api";
import {
  homeTableConfig,
  homeTablecbConfig,
  homeRightConfigData,
} from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
export default {
  name: "home",
  data() {
    return {
      tableCommonMethod: tableCommonMethod,
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      cbtableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      selectArr: [],
      scaleData: [
        {
          name: "正在使用",
          value: "usingNum",
          color: "#F7A515",
          bg: "#FCE1B1",
        },
        {
          name: "在线",
          value: "onlineNum",
          color: "#03DD9D",
          bg: "#B1F4DF",
        },
        {
          name: "离线",
          value: "outlineNum",
          color: "#FF7D7D",
          bg: "#FBCFCE",
        },
      ],
      wasteTypewuran1: {},
      sum: 180,
      selvalue: "",
      table: [],
      config: homeTableConfig,
      cbconfig: homeTablecbConfig,
      formData: {
        diaPageSize: 10,
        diaPageNum: 1,
        endTime: "",
        startTime: "",
      },
      total: 0,
      dialogTableVisible: false,
      cbdialogTableVisible: false,
      pointVisible: false,
      loading: false,
      Point: Point,
      deviceData: {},
      notPassNumData: {},
      findUsingConditionData: {},
      schoolDeviceData: [
        {
          name: "实验室数量",
          value: "laboratoryNum",
          unit: "个",
          img: "main_icon_item1",
        },
        {
          name: "仪器设备总数",
          value: "monitorNum",
          unit: "台",
          img: "main_icon_item2",
        },
        {
          name: "耗材柜总数",
          value: "cabinetNum",
          unit: "台",
          img: "main_icon_item3",
        },
        {
          name: "在线监测系统数量",
          value: "onlineNum",
          unit: "台",
          img: "main_icon_item4",
        },
        {
          name: "视频数量",
          value: "videoNum",
          unit: "台",
          img: "main_icon_item5",
        },
        {
          name: "门禁数量",
          value: "doorNum",
          unit: "台",
          img: "main_icon_item6",
        },
        {
          name: "异常实验室数量",
          img: "main_icon_popupitem",
          value: "notPassNum",
          unit: "个",
        },
      ],
      markers: [],
      curPoint: Point[0],
      maps: {
        map: null,
        infowindow: null,
        AMap: null,
        stu: false,
      },
      outexceed: {},
      inexceed: {},
      righttabData: [],
      difEventOfNumData: {},
      map: {
        pointInfo: [],
        difEquipmentTypeOfNum: {},
        notPassRate: {},
      },
      mapDetail: {
        pointInfo: [],
        difEquipmentTypeOfNum: {},
        notPassRate: {},
      },
    };
  },
  components: {
    mapLegend: () => import("./children/mapLegend"),
    bottomWrap: () => import("./children/bottomWrap"),
    rightWrap: () => import("./children/rightWrap"),
    echartData: () => import("./children/echartData"),
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.selectArr = JSON.parse(localStorage.getItem("departmentData"));
    this.initpointAllInfo({});
    this.initmonitorData();
    this.initdifEventOfNum();
    this.initfindUsingCondition();
    this.initExceed();
    this.initeventListOfNow();
  },
  methods: {
    //
    async initselectEnvList() {
      var params = {
        starttime: this.formData.startTime,
        lasttime: this.formData.endTime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
      };
      let result = await selectEnvList(params);
      if (result.code === 20000) {
        this.table = result.data.rows;
        this.total = result.data.total;
      }
    },
    /* 实时事件列表查询 */
    async initeventListOfNow() {
      homeRightConfigData.forEach((item) => {
        item.createTime = this.$getTime(new Date().getTime() - 100000);
      });
      this.righttabData = homeRightConfigData;
    },
    /* 实时当前点位接口 */
    async initpointInfo(params) {
      let result = await pointAllInfo(params);
      this.initnotPassRate(params);
      if (result.code === 20000) {
        this.mapDetail = result.data;
        this.ititDevice();
      }
    },
    /* 实时所有点位接口 */
    async initpointAllInfo(params) {
      let result = await pointAllInfo(params);
      if (result.code === 20000) {
        this.map = result.data;
        this.getMaps(this.map.pointInfo);
      }
    },
    /* 实时事件事件类型数量查询 */
    async initdifEventOfNum() {
      let result = await difEventOfNum({});
      if (result.code === 20000) {
        this.difEventOfNumData = result.data;
      }
    },
    /* 查看更多列表查询 */
    async initeventList() {
      var params = {
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
      };
      let result = await eventList(params);
      if (result.code === 20000) {
        this.table = result.data.rows;
        this.total = result.data.total;
      }
    },
    // 实验室使用情况查询
    async initfindUsingCondition() {
      let result = await findUsingCondition({});
      if (result.code === 20000) {
        this.findUsingConditionData = result.data;
      }
    },
    // 不带参数不合格率查询
    async initExceed() {
      let result = await notPassRate({});
      if (result.code === 20000) {
        this.outexceed = result.data;
      }
    },
    // 带参数不合格率查询
    async initnotPassRate(params) {
      let result = await notPassRate({ pointNo: params.pointNo });
      if (result.code === 20000) {
        this.inexceed = result.data;
      }
    },
    // 监管概览数据查询
    async initmonitorData() {
      let result = await monitorData({});
      if (result.code === 20000) {
        this.deviceData = result.data;
      }
    },
    seemore() {
      this.$router.push({
        name: "equipment",
      });
    },
    /* 设备统计状态 */
    ititDevice() {
      var that = this;
      let data = [];
      for (let i = 0; i < this.scaleData.length; i++) {
        if (this.mapDetail.difEquipmentTypeOfNum[this.scaleData[i].value] > 0) {
          data.push(
            {
              value:
                this.mapDetail.difEquipmentTypeOfNum[this.scaleData[i].value],
              name: this.scaleData[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  shadowBlur: 8,
                  borderColor: this.scaleData[i].color,
                  shadowColor: this.scaleData[i].bg,
                },
              },
              label: {
                show: true,
                color: this.scaleData[i].color,
              },
              labelLine: {
                length: 20,
                show: true,
                lineStyle: {
                  color: this.scaleData[i].color,
                },
              },
            },
            {
              value:
                this.scaleData.length > 1 &&
                this.mapDetail.difEquipmentTypeOfNum.sumNum !==
                  this.mapDetail.difEquipmentTypeOfNum[this.scaleData[i].value]
                  ? 1
                  : 0,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 10,
                },
              },
            }
          );
        }

        this.wasteTypewuran1 = {
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          toolbox: {
            show: false,
          },
          series: [
            {
              name: "",
              type: "pie",
              clockWise: false,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "outside",
                    formatter: function (params) {
                      var percent = 0;
                      percent =
                        (
                          (params.value.toFixed(0) /
                            that.mapDetail.difEquipmentTypeOfNum.sumNum) *
                          100
                        ).toFixed(0) + "%";
                      if (params.name !== "") {
                        return percent;
                      } else {
                        return "";
                      }
                    },
                    rich: {
                      white: {
                        color: "#ddd",
                        align: "center",
                        padding: [3, 0],
                      },
                    },
                  },
                },
              },
              radius: [80, 82],
              hoverAnimation: false,
              data: data,
            },
          ],
        };
      }
    },
    /* 表格显示 */
    getTable(event) {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.startTime = this.$getTime(originTimeValue[0], true);
      this.formData.endTime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = [this.formData.startTime, this.formData.endTime];
      this.dialogTableVisible = event;
      this.reset();
      this.initeventList();
    },
    getshowCbTable(event) {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.startTime = this.$getTime(originTimeValue[0], true);
      this.formData.endTime = this.$getTime(originTimeValue[1], true);
      this.cbtableTimeValue = [this.formData.startTime, this.formData.endTime];
      this.cbdialogTableVisible = event;
      this.reset();
      this.initselectEnvList();
    },
    // 初始化时间和页码
    reset() {
      this.formData.diaPageSize = 10;
      this.formData.diaPageNum = 1;
      this.total = 0;
      this.table = [];
    },
    /* 加载地图 */
    async getMaps(data) {
      this.loading = true;
      await MapLoader().then(
        (AMap) => {
          this.getInitMap(AMap, data);
        },
        (e) => {}
      );
    },
    /* 生成地图 */
    async getInitMap(AMap = window.AMap, data) {
      const maps = new AMap.Map("map", {
        showLabel: true,
        mapStyle: "amap://styles/adec80976782fba61c30cdbeba77e1e5", //amap://styles/42828ca67777d22056d80019d1c4f90f
        viewMode: "3D",
        labelzIndex: 130,
        pitch: 30,
        rotateEnable: true,
        center: [114.00511, 22.605593],
        resizeEnable: true,
        zoom: 16,
        zooms: [12, 18],
        features: ["road", "point", "bg"],
      });
      this.maps.map = maps;
      this.drawStaion(AMap, maps, data);
      this.loading = false;
    },
    // 生成点位
    drawStaion(AMap, map, pointList) {
      const data = pointList;
      const markers = [];
      let infowindow = null;
      for (let i in data) {
        const curPoint = data[i];
        curPoint.longitude = "114.00511";
        curPoint.latitude = "22.605593";
        if (curPoint.longitude.length > 0 && curPoint.latitude.length > 0) {
          const marker = new AMap.Marker({
            icon: new AMap.Icon({
              image: this.getIcon(curPoint),
              size: new AMap.Size(40, 44), //图标大小
            }),
            position: [curPoint.longitude, curPoint.latitude],
          });
          //弹窗
          infowindow = new AMap.InfoWindow({
            isCustom: true,
            anchor: "bottom-center",
            offset: new AMap.Pixel(5, -12),
          });
          marker.on("click", (e) => {
            this.initpointInfo({
              pointNo: curPoint.pointNo,
              facultyName: curPoint.facultyName,
            });
            this.pointVisible = true;
          });
          markers.push(marker);
          this.maps.infowindow = infowindow;
        }
      }
      this.markers = markers;
      map.add(markers);
      this.loading = false;
    },
    // 获取对应图标
    getIcon(curPoint) {
      switch (curPoint.status) {
        case 0:
          return require("@/assets/images/map/map_item1.svg");
        case 1:
          return require("@/assets/images/map/map_item2.svg");
        case 2:
          return require("@/assets/images/map/map_item3.svg");
        default:
          return require("@/assets/images/map/map_item2.svg");
      }
    },
  },
  watch: {
    // 地图筛选
    selvalue(val) {
      this.initpointAllInfo({ facultyName: val });
    },
    // 表格弹窗时间返回
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initeventList();
      },
      deep: true,
    },
    // 表格弹窗时间返回
    cbtableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initselectEnvList();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select .selectT {
  width: inherit !important;
}
.home {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: hidden;
  .homeleft {
    width: 69.4%;
    position: relative;
    background: #ffffff;
    border: 3px solid #fafafa;
    box-shadow: 0px 3px 6px 0px rgba(6, 14, 48, 0.12),
      0px -5px 12px 0px rgba(6, 14, 48, 0.09);
    margin: 12px;
    border-radius: 4px;
    #map {
      width: 100%;
      height: 100%;
      background-color: transparent !important;
    }
    .maptext {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      color: #5f717d;
      font-size: 24px;
    }
    .slectArr {
      width: 148px;
      height: 26px;
      background: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      position: absolute;
      z-index: 4;
      top: 48px;
      right: 40px;
    }
  }
  .homeright {
    width: 30.6%;
    height: 100%;
  }
  .tableDialog {
    .table {
      height: 90%;
      border: 1px solid #dde4eb;
    }
    /deep/.el-dialog__body {
      height: 77% !important;
    }
    .commonTitle {
      height: 100px !important;
    }
    .bottom-wrap {
      left: 48px !important;
      right: 48px !important;
      position: absolute;
      bottom: 40px;
    }
    .more {
      cursor: pointer;
      margin-left: 24px;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #00bfb1;
      line-height: 28px;
    }
  }
  .tableDialog1 {
    height: 760px !important;
    .commonTitle {
      height: 100px !important;
    }
    .content {
      height: 550px;
    }
    .boxInfo {
      box-sizing: border-box;
      width: 100%;
      padding: 24px 16px;
      border: 1px solid #dde4eb;
      .label {
        width: 100px;
      }
    }
    .detail {
      .listItem1 {
        width: 47.3%;
        height: 40px;
        background: #f5f6fa;
        border-radius: 4px;
      }
      .listItem1:nth-last-child(2n) {
        margin-right: 0px !important;
      }
    }
    .deviceDetail {
      width: 100%;
      display: flex;
      align-items: center;
      padding-bottom: 40px;
      .echart_right {
        width: 100%;
        display: flex;
        align-items: center;
        .center_chart {
          position: relative;
          top: 30px;
          width: 50%;
          // height: 100%;
          // width: 200px;
          height: 200px;
        }
        .data-right {
          width: 26%;
          height: 100%;
          justify-content: center;
          .data-end-right {
            box-sizing: border-box;
            width: 100%;
            .status:nth-last-child(1) {
              margin-bottom: 0px !important;
            }
            .spot {
              width: 8px;
              height: 8px;
              border: 3px solid;
              margin-right: 12px;
            }
          }
        }
      }
    }
    .seemore {
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #00bfb1;
      // margin-top:20px;
      .more {
        margin-top: 20px;
        cursor: pointer;
        margin-left: 24px;
        width: 90px;
        height: 28px;
        border: 1px solid #00bfb1;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00bfb1;
        line-height: 28px;
      }
    }
  }
}
</style>